<template>
  <div class="music">
    <ul class="menu">
      <li class="menu-item">
        <router-link to="/">发现音乐</router-link>
      </li>
      <li class="menu-item">
        <a href="#"> 视频 </a>
      </li>
      <li class="menu-item">
        <a href="#"> 朋友 </a>
      </li>
      <li class="menu-item">
        <a href="#"> 直播 </a>
      </li>
      <li class="menu-item">
        <a href="#"> 私人FM </a>
      </li>
    </ul>
    <ul class="my-music">
      <span class="title">我的音乐</span>
      <li class="item">
        <a href="#"><a-icon type="customer-service" /><span>本地音乐</span></a>
      </li>
      <li class="item">
        <a href="#"> <a-icon type="download" /> <span>下载管理</span> </a>
      </li>
      <li class="item">
        <a href="#"> <a-icon type="star" /> <span>我的收藏</span> </a>
      </li>
      <li class="item">
        <a href="#">
          <a-icon type="cloud-upload" /> <span>我的音乐网盘</span>
        </a>
      </li>
    </ul>
    <ul class="my-music my-collection">
      <div class="title">
        <div class="left">
          我创建的歌单 <a-icon :type="arrow" class="ico" @click="handleArrow" />
        </div>
        <a-icon type="plus" class="ico" />
      </div>
      <div class="wrap" v-if="isShow">
        <li class="item" v-for="item in userSongLists" :key="item.id">
          <router-link :to="{ name: 'listDetail', params: { id: item.id } }">
            <a-icon type="heart" class="ico" /><span>{{ item.name }}</span>
          </router-link>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "MainMenu",
  data() {
    return {
      arrow: "caret-down",
      isShow: true,
      userSongLists: [],
    };
  },
  methods: {
    handleArrow() {
      if (this.arrow === "caret-down") {
        this.arrow = "caret-right";
        this.isShow = false;
      } else {
        this.arrow = "caret-down";
        this.isShow = true;
      }
    },
    getUserList() {
      const id = localStorage.getItem("userId");
      if (id) {
        axios.get("/user/playlist", { params: { uid: id } }).then((res) => {
          console.log(res);
          this.userSongLists = res.playlist;
        });
      }
    },
  },
  created() {
    this.getUserList();
    this.$bus.$on('getUserList', () => {
      this.getUserList();
    })
    this.$bus.$on('cancelUserList', () => {
      this.userSongLists  = [];
    })
  },
};
</script>

<style lang="scss" scoped>
.music {
  a {
    color: inherit;
  }
  .menu {
    .menu-item {
      height: 4rem;
      line-height: 4rem;
      padding: 0 1rem;
      cursor: pointer;
      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
      a {
        font-size: 1.8rem;
      }
    }
  }
  .my-music {
    padding: 0 0.5rem;
    .title {
      margin-left: 0.2rem;
      font-size: 1.2rem;
    }
    .item {
      height: 4rem;
      line-height: 4rem;
      padding-left: 0.5rem;
      cursor: pointer;
      span {
        font-size: 1.7rem;
        margin-left: 1rem;
      }
      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .my-collection {
    .title {
      display: flex;
      width: 16.4rem;
      justify-content: space-between;
      .left {
        .ico {
          font-size: 1.3rem;
        }
      }
      .ico {
        font-size: 1.7rem;
        cursor: pointer;
      }
    }
  }
}
</style>